<template>
  <div class="app-container">
    <el-tabs v-model="status" type="card" @tab-click="handleClickStatus">
      <el-tab-pane :name='null'>
        <span slot="label"><i class="el-icon-s-order"></i> 全部</span>
      </el-tab-pane>
      <el-tab-pane name="1352217944631853057">
        <span slot="label"><i class="el-icon-bank-card"></i>德格藏医药</span>
      </el-tab-pane>
      <el-tab-pane name="1353731419288924162">
        <span slot="label"><i class="el-icon-refrigerator"></i>手工艺品</span>
      </el-tab-pane>
    </el-tabs>
    <div style="margin: 20px 0;display: flex;justify-content: space-between;">
      <el-button type="danger" icon="el-icon-delete-solid" @click="delSome">批量删除</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="addSwipers">新增</el-button>
    </div>
    <el-table :data="tableData" stripe border style="width: 100%" v-loading="loadings" @selection-change="handleSelectionChange">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column label="商品轮播图片" width="300">
        <template slot-scope="scope">
          <el-image
              style="width: 170px; height: 100px"
              :src="scope.row.picUrl"
              fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="分类所属/商品"  width="200">
        <template slot-scope="scope">
         <div>{{ type[scope.row.categoryId] }}/{{ scope.row.spuName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column prop="name" label="轮播图名称"  width="200"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"  width="200"></el-table-column>
      <el-table-column label="状态" width="200">
        <template slot-scope="scope">
          <el-switch
              style="display: block"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              >
            </el-switch>
        </template>
      </el-table-column>
     
      <el-table-column  label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button @click="editClick(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
          <el-button @click="deleteClick(scope.row)" type="text" size="small" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
    </div>
    <el-dialog
        title="提示"
        :visible.sync="dialogLogistics"
        width="30%">
        <el-form :model="addForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name" style="width: 215px;"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="addForm.sort" type="number" style="width: 215px;"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="categoryId">
          <el-select v-model="addForm.categoryId" placeholder="请选择分类" @change="selectType">
            <el-option label="德格藏医药" value="1352217944631853057"></el-option>
            <el-option label="手工艺品" value="1353731419288924162"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属商品" prop="spuId" v-if="addForm.categoryId">
          <el-select v-model="addForm.spuId" placeholder="请选择商品">
            <el-option v-for="item in  shopOption" :key="item.id" :label="item.name" :value="item.id">
              <div style="display: flex;justify-content: space-between;align-items: center;margin: 5px;">
                <el-image
                    style="width: 50px; height: 50px"
                    :src="item.picUrl"
                    fit="cover"></el-image>
                 <div>{{ item.name }}</div>   
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="state">
          <el-switch :active-value="1"
              :inactive-value="0" v-model="addForm.state"></el-switch>
        </el-form-item>
        <el-form-item label="图片" prop="picUrl">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileUrl"
            :headers="headers"
             :multiple="false"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="addForm.picUrl" :src="addForm.picUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('ruleForm')">{{addForm.id?'确认修改':'立即创建'}}</el-button>
           <el-button @click="resetForm('ruleForm')" v-if="!addForm.id">重置</el-button>
        </span>
      </el-dialog>
  </div>
  
</template>

<script>
import { getToken } from '@/utils/auth'
import {  deletSwiper,getSwiper,getShops,addSwiper,editSwiper} from '@/api/mall/orderinfo'
export default {
  name: 'orderinfo',
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/oss/uploadImg", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
      orderInfo: {
        categoryId:"",
        current:1,
        size:10
      },
      shopOption:[],
      type:{
        '1352217944631853057':'德格藏医药',
        '1352218128409477121':'善地德格',
        '1353731419288924162':'手工艺品'
      },
      addForm:{
        spuId:"",
        state:1,
        sort:"",
        name:"",
        categoryId:"",
        picUrl:""
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
          categoryId: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
          sort:[
          { required: true, message: '请输入排序', trigger: 'blur' },
          ],
          spuId:[
          { required: true, message: '请选择商品', trigger: 'change' }
          ],
          picUrl:[
          { required: true, message: '请上传图片', trigger: 'change' }
          ]
        },
      status:null,
      loadings:false,
      tableData: [],
      multipleSelection: [],
      dialogLogistics: false,
      activeItem:{},
    }
  },
  created() {
    this.getOrderlist()
  },
  methods: {
    async getOrderlist() {
      this.loadings = true
      let res = await getSwiper(this.orderInfo)
      console.log(res)
      if(res.code!=200)return
      this.tableData = res.data.records
      this.loadings = false
    },
    handleClickStatus(tab, event) {
      // console.log(tab.name)
      this.orderInfo.categoryId = tab.name
      this.getOrderlist()
    },
    selectType(e){
      //  console.log(e)
      this.getshops(e)
    },
    async getshops(e){
         let res = await getShops({categoryFirst:e})
         console.log(res)
         if(res.code!=200)return
         this.shopOption = res.data.data
        //  console
    },
    addSwipers(){
      this.addForm={
        spuId:"",
        state:1,
        sort:"",
        name:"",
        categoryId:"",
        picUrl:""
        },
      this.dialogLogistics=true
    },
    //选择
    handleSelectionChange(val){
      val.forEach(element => {
        this.multipleSelection.push(element.id)
      });
      console.log(this.multipleSelection)
    },
    delSome(){
      if(this.multipleSelection.length<=0) return  this.$message.error('未选择！');
      console.log(this.multipleSelection)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await deletSwiper(this.multipleSelection)
          if(res.code!=200)return
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getOrderlist()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    deleteClick(e){
          let data = []
          data.push(e.id)
          this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await deletSwiper(data)
          if(res.code!=200)return
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getOrderlist()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    handleAvatarSuccess(res, file) {
      if(res.status!='success')return
      this.addForm.picUrl= res.path
      },
      beforeAvatarUpload(file) {
        console.log(file.type)
      },
    submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            var res = null
            console.log(this.addForm)
            if(this.addForm.id){
              res = await editSwiper(this.addForm)
            }else{
              res = await addSwiper(this.addForm)
            }
            console.log(res)
            if(res.code!=200)return
            this.$message({
            type: 'success',
            message: '成功!'
          });
            this.dialogLogistics=false
            this.getOrderlist()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      editClick(e){
          this.addForm = e
          this.getshops(e.categoryId)
          delete this.addForm.createTime
          this.dialogLogistics=true
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
